import React from 'react'
// 导入路由
import { Tabs, message } from 'antd'
import { API } from '../../utils/api'
// 导入组件自己的样式文件
import './index.scss'

import left from '../../assets/images/left.png'
import right from '../../assets/images/right.png'

const { TabPane } = Tabs

export default class Home extends React.Component {
  state = { key: '0', list: [] }
  componentDidMount() {
    this.getTabList()
  }
  // 跳转链接
  toLink(url) {
    window.location.href = url
  }
  // 获取当前数据、
  async getTabList() {
    const {
      data: { data },
      success,
    } = await API.get('/cases/ceshi/getlist.php')
    if (success) return message.info('数据获取失败', 2, null, false)
    message.success('数据获取成功', 1)
    this.setState({
      list: data.list,
    })
  }
  // 渲染导航栏
  renderTabs = () => {
    const { list, key } = this.state
    return list.map((item, index) => (
      <TabPane key={index} tab={item.item_name}>
        <div className="item_box">
          {index == key ? this.renderTabItem() : ''}
        </div>
      </TabPane>
    ))
  }

  // 渲染tabitem
  renderTabItem = () => {
    const { list, key } = this.state
    console.log(list[key])
    return list[key].items2.map((item, index) => {
      return (
        <div className="tab_item" key={index}>
          <div className="tab_item_teacher">
            <img src={item.item_pic} alt="img" />
          </div>
          <div className="tab_item_text">
            <div className="tab_item_text1">
              <div>{item.item_title}</div>
              <div>讲师：{item.item_desc}1</div>
            </div>
            <div className="tab_item_text2">{item.item_desc2}</div>
            <div className="btn" onClick={() => this.toLink(item.item_url)}>
              观看回放>>
            </div>
          </div>
        </div>
      )
    })
  }
  // 点击tab切换
  handleClick(key) {
    console.log(key)
    this.setState({
      key,
    })
  }
  render() {
    const { key } = this.state
    return (
      <div className="home">
        <div className="content_box">
          <div className="header">
            <div className="image_box">
              <img src={left} alt="img" />
            </div>
            <div>618同行们都用了视频</div>
            <div className="image_box">
              <img src={right} alt="img" />
            </div>
          </div>
          <div className="title">
            官方数据：大盘数据发布视频成交转化率提升20%
          </div>
          <div className="cont">
            <Tabs
              activeKey={key}
              onTabClick={(key) => {
                this.handleClick(key)
              }}
              tabBarGutter={0}
            >
              {this.renderTabs()}
            </Tabs>
          </div>
        </div>
      </div>
    )
  }
}
